<template>
	<view class="navnar">
		<su-status-bar v-if="!sheep.$platform.inApp" />
		<view class="navbar-placeholder"></view>
		<view class="center ss-flex justify-between align-center" :style="{
      top: sheep.$platform.device.statusBarHeight + 'px',
    }">
			<view class="ss-flex align-center ss-p-l-20" v-if="!sheep.$platform.inPc" :style="[capsuleStyle]">
				<uni-icons type="back" size="20" color="#fff" @click="back"></uni-icons>
			</view>
			<view class="ss-flex-1 ss-flex justify-start align-center ss-p-l-20">
				<view class="top-item ss-m-r-30" :class="[index === 0 ? 'active' : '']" @click="changes(0)">商城商户</view>
				<view class="top-item ss-m-r-30" :class="[index === 1 ? 'active' : '']" @click="changes(1)">超引擎计划</view>
				<view class="top-item" :class="[index === 2 ? 'active' : '']" @click="changes(2)">鲸囍供应链</view>
			</view>
			<view v-if="!sheep.$platform.inPc" :style="[capsuleStyle]"></view>
		</view>
	</view>
	<view class="navbar-s bg" v-show="show" :style="{
      height: sheep.$platform.device.statusBarHeight + 44+ 'px',
    }"></view>
</template>

<script setup>
	import {
		computed,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';

	const emit = defineEmits(['change'])

	const props = defineProps({
		index: {
			type: Number,
			default: 0,
		},
		show:{
			type: Boolean,
			default: false
		}
	})
	
	const hasHistory = sheep.$router.hasHistory();

	const capsuleStyle = computed(() => {
		return {
			width: sheep.$platform.capsule.width-30 + 'px',
			minWidth: sheep.$platform.capsule.width-30 + 'px',
			height: sheep.$platform.capsule.height + 'px',
			margin: '0',
		};
	});
	
	const back = () => {
		if (hasHistory) {
		  sheep.$router.back();
		} else {
		  sheep.$router.go('/pages/index/home');
		}
	}

	const changes = (e) => {
		if (e === props.index) {
			return 
		}
		emit('change', e)
	}
	

	
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}


.navbar-s {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index:98;
}
	.navnar {
		width: 100%;

		.navbar-placeholder {
			width: 100%;
			height: 44px;
		}

		.center {
			width: 100vw;
			height: 44px;
			position: fixed;
			top: 0;
			z-index: 999;
			// background-color: red;

			.top-item {
				font-size: 26rpx;
				font-weight: normal;
				color: #D4D4D4;
			}
		}
	}

	.active {
		font-weight: 500 !important;
		color: #FFFFFF !important;
		border-bottom: 1rpx solid #FFFFFF;
	}
	
	.bg {
		background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250410/5a220b32f645945876152dfd171c1d9a.png');
		background-size: 100% 100%;
	}
</style>